<template>
    <div  class="container-width app-container">
<el-row class="active_warp">
      <el-col :span="8">
        <el-image class="img" :src="activityInfo.activityThumb" ></el-image>
      </el-col>
      <el-col :span="16" class="content" flex="dir:top main:justify" style="display:flex; flex-direction:column; justify-content:space-between; ">
        <p>{{ activityInfo.activityName }}</p>
        <p>活动时间：<span>{{ this.thisFormatDate(activityInfo.startTime) }} ~ {{ this.thisFormatDate(activityInfo.endTime) }}</span></p>
        <p>活动地址：<span>{{ activityInfo.activityAddress }}</span></p>
        <p>人数限制：<span>{{ activityInfo.limitCount }} 人</span></p>
        
        <div flex="main:justify cross:center" style="display:flex; align-items:center; justify-content:space-between; ">
          <!-- <el-button class="btn" round :disabled="activityInfo.joined" @click="signUp">{{activityInfo.joined?'已报名':"立即报名"}}</el-button> -->
          <el-button class="btn" round :disabled="activityInfo.joined" @click="signUp">{{statusText}}</el-button>
        <p>已有<span>{{activityInfo.signUpCount}}</span>人报名</p>
        </div>
      </el-col>
    </el-row>

    <div>
      <p class="label">活动介绍</p>
      <div class="describe_html"  v-html="detail"></div>
    </div>

    <signUp :activeId="activityInfo.activityId" :callback="signUpSuccess" v-model="dlg"></signUp>
    </div>
</template>

<script lang="ts">

import { activityDetail } from "/@/api/activityApi"
import signUp from '/@/components/signUpActivityDlg.vue'

import {formatDate} from '/@/utils/tools'

export default {
  components: {
    signUp
  },
  data(){
      return{
        dlg:false,
        detail:"",
        activityInfo:{},
        isSignUp:false,
      }
  },
  computed:{
      status(){
          switch (this.activityInfo.status){
              case 1:return "btn_1";
              case 2:return "btn_2";
              default:return "btn"
          }
      },
      statusText(){
          switch (this.activityInfo.status){
              case 1:return "已报名";
              case 2:return "已结束";
              default:return "立即报名"
          }
      }
  },
  mounted(){
    this.getActivityDetail()
  },
  methods:{
    getActivityDetail() {
        activityDetail({activityId:this.$route.query.activityId})
        .then((res)=>{
          const {activityInfo,detail} = res;
          this.detail = detail
          this.activityInfo = activityInfo
        }).catch(()=>{})
    },
    signUp() {
      this.dlg= true
    },
    signUpSuccess() {
      this.dlg = false;
      this.getActivityDetail()
    },
    thisFormatDate(date) {
      return formatDate(date);
    }
  }
}
</script>

<style lang="scss" scoped>

.img{
  height:208px;
  width: 100%;
  border-radius: 6px
}
.content{
  color: #666666;
   height:208px;
   padding-left: 20px;
  span{
    color: var(--el-color-primary); //$--color-primary;
  }
   p:nth-child(1){
     font-size:22px;
     color: #333333;
   
   }
   
}
.btn{
  color: #ffffff;
  background:var(--el-color-primary); //$--color-primary;$--color-primary;
  width: 200px;
  height:40px;
  border-radius: 20px;
  font-size:18px;
  font-weight: 600;
}
.label{
  font-size:20px;
  width: 80px;
  margin-top: 50px;
  margin-bottom:10px;
  color: var(--el-color-primary); //$--color-primary;$--color-primary;
  border-bottom: 1px solid var(--el-color-primary); //$--color-primary;$--color-primary;
}


</style>